<template>
  <div class="editInfo-container">
    <!-- 顶部盒子 -->
    <div class="top-box">
      <van-nav-bar :border="false" @click-left="$router.push('/info')">
        <template #left>
          <i class="iconfont iconbtn_nav_back"></i>
        </template>
        <template #right>
          <span v-if="isEdit" @click="submit">
            保存
          </span>
        </template>
        <template #title>
          <span class="custom-title">修改{{ map[property] }}</span>
        </template>
      </van-nav-bar>
    </div>
    <!-- 内容盒子 -->
    <div class="main-box">
      <van-form ref="form">
        <!-- 昵称 -->
        <van-field
          v-if="property === 'nickname'"
          v-model="form.nickname"
          name="nickname"
          placeholder="请输入昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <!-- 头像 -->
        <van-field
          class="icon-field"
          name="avatar"
          v-else-if="property === 'avatar'"
        >
          <template #input>
            <van-uploader
              preview-size="200px"
              v-model="files"
              :max-count="1"
              :before-read="beforeRead"
              :after-read="afterRead"
            />
          </template>
        </van-field>
        <!-- 个人简介 -->
        <van-field
          v-else-if="property === 'intro'"
          v-model="form.intro"
          name="intro"
          placeholder="请输入个人简介"
        />
        <!-- 职位名 -->
        <van-field
          v-else-if="property === 'position'"
          v-model="form.position"
          name="position"
          placeholder="请输入职位名"
        />
      </van-form>
    </div>
  </div>
</template>

<script>
// 导入接口
import { edit, uploadAvatar } from '../../api/api'
// 导入辅助函数
import { mapState, mapActions } from 'vuex'
export default {
  name: 'editInfo',
  data () {
    return {
      // 修改的字段
      form: {
        nickname: '',
        intro: '',
        avatar: '',
        position: ''
      },
      // 上传的文件信息
      files: [],
      property: this.$route.query.property,
      // 属性对应关系
      map: {
        intro: '个性签名',
        nickname: '昵称',
        avatar: '头像',
        position: '职位'
      },
      // 是否变更了数据
      isEdit: false
    }
  },
  // 生命周期钩子中获取vuex的数据并赋值
  created () {
    this.form.nickname = this.userInfo.nickname
    this.form.intro = this.userInfo.intro
    this.form.position = this.userInfo.position
    // 上传组件使用的图片
    this.files = [{ url: this.userInfo.avatar }]
    // 注册监听
    this.$watch(
      'form',
      () => {
        this.isEdit = true
      },
      {
        deep: true
      }
    )
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapActions(['getUserInfo']),
    // 头像格式校验
    beforeRead (file) {
      const typeArr = ['image/jpeg', 'image/png', 'image/gif']
      if (!typeArr.includes(file.type)) {
        this.$toast('请上传图片 格式')
        return false
      }
      return true
    },
    // 上传
    async afterRead (file) {
      file.status = 'uploading'
      file.message = '上传中...'
      // console.log(file)
      // console.log(uploadFile)
      const uploadRes = await uploadAvatar(file.file)
      file.status = 'success'
      file.message = '上传成功'
      // 保存图片地址
      this.form.avatar = uploadRes.data[0].id
    },
    // 数据提交
    submit () {
      this.$refs.form
        .validate()
        .then(async res => {
          // console.log('success:', res)
          // 调用接口
          await edit({
            [this.property]: this.form[this.property]
          })
          await this.getUserInfo(true)
          this.$toast.success('修改成功')
          this.$router.go(-1)
        })
        .catch(err => {
          console.log('error:', err)
        })
    }
  }
}
</script>

<style lang="less">
.editInfo-container {
  height: 100vh;
  background-color: #fff;
  .top-box {
    background-color: white;
    box-shadow: 0px 2px 4px 0px rgba(24, 26, 57, 0.04);
    .van-nav-bar__left {
      padding-left: 0;
    }
    .iconbtn_nav_back {
      font-size: 44px;
    }

    .van-nav-bar__right {
      .num {
        color: #e40137;
      }
    }
  }
  .main-box {
    .van-field:not(.icon-field) {
      background: #f7f4f5;
      border-radius: 4px;
      width: 345px;
      margin: 15px auto;
    }
    .van-uploader {
      margin: 0 auto;
    }
  }
}
</style>
